<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand">
  <link rel="stylesheet" href="css/photots.css"/>
</head>

<body>
  <header>
      <nav class="navBox">
          <div class="left">
                      <div class="logoimg">
                              <img src="images/logo.jpg" alt="Your Logo">
                      </div>
                      <h2 style="font-style: oblique;">Homepage</h2>
                  </div>
          <div class="right">
              <ul>
                  <li><a href="index.html" style="color: red;">Home page</a></li>
                  <li><a href="jineng.html" style="color: red;">Skills page</a></li>
                  <li><a href="photos.html" style="color: red;">Gallery page</a></li>
                  <li><a href="shixi.html" style="color: red;">Internship page</a></li>
                  <li><a href="contact.html" style="color: red;">Contact page</a></li>
                  <li><a href="zhiye.html" style="color: red;">Career page</a></li>
                  <li><a href="aid.html" style="color: red;">Ambitions page</a></li>
                  <li><a href="hobby.html" style="color: red;">Hobbies page</a></li>
              </ul>
          </div>
      </nav>
  </header>
  <div class="container">

  </div>
  <main>
    <video src="./audio/1.mp4" autoplay loop style="width: 100%;height: auto;"></video>
  </main>
  <!-- 任务区域 -->
  <div class="people banner">
    <p style="text-align: center;"> <span style="border-bottom:3px solid yellow">Front end development technology</span> </p>
    <div class="artical">
      <p style="line-height: 40px;">
        Front-end development is the process of creating front-end interfaces such as WEB page or APP to present them to users. It realizes the user interface interaction through HTML, CSS and JavaScript, as well as various derived technologies, frameworks and solutions, of Internet products.
        Front-end development evolved from the web page production, the name has a very obvious characteristics of The Times. In the evolution process of the Internet, web page production is the product of the Web1.0 era. In the early days, the main content of websites was static, mainly pictures and text, and users' behavior of using websites was also mainly browsing. With the development of Internet technology and the application of HTML 5 and CSS 3, modern web pages are more beautiful, with significant interaction effect and more powerful functions.
        Front-end development follows the development of mobile Internet and brings a large number of high-performance mobile terminal device applications. HTML5,Node.js Extensive application, various UI framework, JS libraries emerge in an endless stream, the development difficulty is gradually increasing.
      </p>
    </div>
    <div class="human">
      <div class="item">
        <div class="img">
          <img src="./images/1.webp" alt="">

        </div>
        <p style="font-weight: 700; margin-top: 10px;">HTML </p>


      </div>
      <div class="item">
        <div class="img">
          <img src="./images/2.webp" alt="">

        </div>
        <p style="font-weight: 700; margin-top: 10px;">CSS </p>

      </div>
      <div class="item">
        <div class="img"> <img src="./images/3.webp" alt="">

        </div>
        <p style="font-weight: 700; margin-top: 10px;">Jquery </p>

      </div>
    </div>
    <div class="human">
      <div class="item">
        <div class="img">
          <img src="./images/4.webp" alt="">

        </div>
        <p style="font-weight: 700; margin-top: 10px;">
          Vue </p>

      </div>
      <div class="item">
        <div class="img">
          <img src="./images/5.webp" alt="">

        </div>
        <p style="font-weight: 700; margin-top: 10px;">
          JavaScript </p>

      </div>
      <div class="item">
        <div class="img">
          <img src="./images/6.webp" alt="">

        </div>
        <p style="font-weight: 700; margin-top: 10px;">React </p>

      </div>
    </div>
    <div class="human">



    </div>
  </div>
  <footer>
    <div class="footer" style="height: 100px;">
      <p style="text-align: center; margin-bottom: 50px;">
      <div class="box">


        <h3 style="font-size: 35px;">personal homepage</h3>
      </div>
      </p>
      <p style="font-size: 20px;color: #000;">2023/10/08</p>
      <p style="font-size: 20px;color: #000;">@all right reserved</p>
              <div class="logo-container">
            <img src="icon/1.png" alt="Logo 1" class="footer-logo">
            <img src="icon/2.png" alt="Logo 2" class="footer-logo">
            <img src="icon/3.png" alt="Logo 3" class="footer-logo">
        </div>
    </div>
  </footer>
</body>

</html>